// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { search } from '../../../module/module'

// 引入样式
import Style from '../style/style.js';

// 引入公用组件
import { Status, NavBar, ScrollableTabBar, Good, RnFlatList, Results, LoadingData } from '../../../components/index.js'

// 引入专用组件
// import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../../util/utils.js'

class HomeGood extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            loading: false,
            dataList: {
                total: 0,
                size: 10,
                current: 1,
                pages: 1,
                records: []
            }
        }
    }

    componentDidMount() {
        // this.dataList.props.request()
    }


    handleSearch(options) {
        const { data } = this.props
        return search({
            categoryId: data.id,
            size: 6,
            ...options
        }).then(res => {
            this.setState({
                dataList: {
                    ...res.data,
                    records: this.state.dataList.records.concat(res.data.records)
                }
            })
            return {
                data: this.state.dataList.records
            }
        })
    }

    render() {
        const { backgroundColor, select, onSelect, data } = this.props
        const { refreshing, dataList } = this.state
        let width = 300
        return (
            <View style={{ backgroundColor: '#fff', marginTop: 10 }}>
                <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, padding: 15 }}>{data.categoryName}</Text>
                <View style={{ ...borderBottom() }}></View>
                <LoadingData
                    ref={(r) => this.dataList = r}
                    request={() => {
                        return this.handleSearch({
                            current: 1,
                        })
                    }}
                    type="scroll"
                    scroll={{
                        horizontal: true,
                        showsHorizontalScrollIndicator: false,
                    }}
                    style={{ flexDirection: 'row', }}
                    data={dataList.records}
                    rowItem={(item, index) => {
                        return (
                            <Good width={width} select={select} onSelect={onSelect} data={item} key={index}/>
                        )
                    }}
                >
                </LoadingData>
                {/* 
                {dataList.records.length > 0 && (
                        {dataList.records.map((item, index) => {
                            return ()
                        })}
                )}
                {dataList.records.length <= 0 && (
                    <Results type='data' width={size(500)} height={size(200)} />
                )} */}
            </View >
        );
    }
}


export default connect(({ user }) => ({
    user
}))(HomeGood)
